<script setup lang="ts">
import { ref, unref } from "vue";

interface Props {
  multiple?: boolean;
  mimetype?: string;
}
interface Emit {
  (t: "change", files: File[]);
}
const props = withDefaults(defineProps<Props>(), {
  mimetype: ".png,.jpg,.jpeg",
  multiple: false,
});
const emit = defineEmits<Emit>();
const FileInputHTMLElement = ref<HTMLInputElement>();
function handleFileChooseChange() {
  const inputEle = unref(FileInputHTMLElement);
  const files = inputEle.files;
  emit("change", Array.from(files));
  inputEle.value = "";
}
function trigger() {
  unref(FileInputHTMLElement).click();
}
defineExpose({
  trigger
});
</script>
<template>
  <input
    ref="FileInputHTMLElement"
    :multiple="multiple"
    type="file"
    @change="handleFileChooseChange"
    :accept="mimetype"
  />
</template>
